<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>jQuery.LocalScroll</title>
	<meta name="keywords" content="javascript, jquery, plugins, scroll, anchor, to, navigation, scrollTo, smooth, animation, ajax, overflow, element, window, lazy, effect, ariel, flesler, customizable" />
	<meta name="description" content="AJAX Demo of jQuery.LocalScroll. A jQuery plugin to make anchor navigation work with a smooth animation, made by Ariel Flesler." />
	<meta name="robots" content="index,follow" />
	<link type="text/css" rel="stylesheet" href="../css/ajax-style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.scrollTo-min.js"></script>
	<script type="text/javascript" src="../../jquery.localScroll.js"></script>
	<script type="text/javascript">
		jQuery(function( $ ){
			/**
			 * THIS BLOCK IS SPECIFICALLY FOR THE DEMO
			 * Binding of the section links, to load other sections inside the content div
			 */
			var $sections = $('#navigation a'),// Links on the left
				last = null;// Last section
			
			$sections.click(function(){
				if( last != this ){ // let's avoid needless requests
					// I use the extension .ahah for a speicific reason, you use .html or .php or w/e you want.
					$('#content').html( '<p class="loading">Loading...</p>' ).load( this.hash.slice(1) + '.html', function(){
						this.scrollLeft = 0;//scroll back to the left
					});
				}
				last = this;
				this.blur();// Remove the awful outline
				return false;
			});
			
			$sections.eq(0).click(); // Load the first section
			
			/**
			 * Actual call to jQuery.localScroll.
			 * Most jQuery.LocalScroll's defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option.
			 * @see http://flesler.demos.com/jquery/scrollTo/
			 */
			
			$('#content').localScroll({// only the links inside that jquery object will be affected
				lazy true, // This is the KEY setting here, makes the links work even after an Ajax load.
				target: '#content', // The element that gets scrolled
				axis:'x', // Horizontal scrolling
				duration:500,
				onBefore:function( e, subsec, $cont ){//'this' is the clicked link
					if( this.blur )
						this.blur(); // Remove the awful outline
				}
			});
		});
	</script>
</head>
<body>
	<h1>jQuery.LocalScroll&nbsp;<strong>by Ariel Flesler</strong></h1>
	<h2 class="title">AJAX Demo</h2>
	<ul id="navigation">
		<li><a href="#section1">Section 1</a></li>
		<li><a href="#section2">Section 2</a></li>
		<li><a href="#section3">Section 3</a></li>
		<li><a href="#section4">Section 4</a></li>
		<li><a href="#section5">Section 5</a></li>
	</ul>															
	<div id="content">
		<p class="loading">Loading...</p>		
	</div>
	<div id="links">
		<h3>Links</h3>
		<ul>
			<li><a target="_blank" href="http://plugins.jquery.com/project/LocalScroll">Project Page</a></li>
			<li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html">Main blog article</a></li>
			<li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.LocalScroll">All articles</a></li>
			<li><a href="../" rel="prev" rev="next" type="text/html">Regular Demo</a></li>
			<li><a href="http://flesler.webs.com/jQuery.ScrollTo/" type="text/html">jQuery.ScrollTo's Demo</a></li>
		</ul>
	</div>
</body>
</html>
